<template>
  <div class="c1">
    <p class="d1">
      插槽，{{ str }}
    </p>
    <p class="d1">
      父组件引入了子组件c1，并在使用该组件时，在组件中写入了内容。
    </p>
    <p class="d1">比如"你好啊，这里是默认插槽的内容"，那么，这句话就会显示在{{ str }}的位置</p>
    <p class="d1">如果没有加入插槽，父组件中使用c1时，在c1组件中写入的内容，就不会显示出来</p>
    <p class="d2">也就是说，插槽相当于告诉组件，这部分内容要显示在子组件的哪个位置</p>
    <h3>
      <slot></slot>
    </h3>
  </div>
</template>

<script>
export default {
  name: 'c1',
  data() {
    return {
      str: '<slot></slot>'
    }
  }
}
</script>